<template>
  <div>
    <ul>
      <li v-for=" c in courses" :key="c.id">
        <!-- <router-link :to="`/home/course/item/${c.id}/${c.name}`">{{c.name}}</router-link> -->
        <!-- <router-link :to="{name:'item',params:{id:c.id,name:c.name}}">{{c.name}}</router-link> -->
        <!-- <router-link :to="{name:'item',query:{id:c.id,name:c.name}}">{{c.name}}</router-link> -->
        <router-link :to="{name:'item',params:{id:c.id},query:{name:c.name}}">{{c.name}}</router-link>
        <!-- <router-link :to="{path:'/home/course/item',query:{id:c.id,name:c.name}}">{{c.name}}</router-link> -->
        <!-- <router-link :to="`/home/course/item/?id=${c.id}&name=${c.name}`">{{c.name}}</router-link> -->
        </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name:'Course',
    data(){
      return{
        courses:[
          {id:'001',name:'js'},
          {id:'002',name:'react'},
          {id:'003',name:'vue'},
          
        ]
      }
    }
  }
</script>

<style scoped>
  
</style>